<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>地图</title>
    <style>
    #showMap{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    </style>
  </head>
  <body>
    <div id="showMap"></div>
    <script>
      var map = null, marker = null, user = null;
      // H5 plus事件处理
      if(window.plus){plusReady();}else{document.addEventListener('plusready', plusReady, false);}
      function plusReady(){
        var ws = plus.webview.currentWebview();
        creatMap();
        var locations = ws.preload.option;
        for(var i=0;i<locations.length;i++){
        	addMarker(locations[i].longitude, locations[i].latitude, locations[i].name, locations[i].phone+"", ws.preload.flag);
        }
        // ws.preload.option.forEach((item, index)=>{
        //   addMarker(item.longitude, item.latitude, item.name, item.phone, ws.preload.flag);
        // });
        // addMarker(103.969664,30.677349,'司机','司机详细', 0);
        // addMarker(103.968847,30.67422,'乘客','乘客详细', 1);
      }

      // 初始化地图
      function creatMap(params) {
        map = new plus.maps.Map("showMap");
        map.onclick = function( point ){
          // 用户点击地图的点事件
          alert( JSON.stringify(point) );
        }
        // 卫星地图
        map.setMapType( plus.maps.MapType.MAPTYPE_SATELLITE );
        // 显示用户
        map.showUserLocation( true );
        // 获取用户位置：
        map.getUserLocation( function ( state, point ){
          if( 0 == state ){
            console.log('用户位置：' + JSON.stringify(point));
            // 设置用户中心点
            user = point;
            map.setCenter(point);
            // 缩放级别
            map.centerAndZoom(point , 18);
          }else{
            console.log( "Failed!" );
          }
        });
      }
      
      // 添加覆盖点
      function addMarker(long, lat, name, title, flag) {
        marker = new plus.maps.Marker(new plus.maps.Point(long,lat));
        flag === 0 ? marker.setIcon("driver.png") : marker.setIcon("passenger.png");
        marker.setLabel(name);
        var bubble = new plus.maps.Bubble(title);
        marker.setBubble(bubble);
        map.addOverlay(marker);
      }

    </script>
  </body>
</html>
